<template>
  <div class="category-card-main">
    <el-card class="card-box category-card-container">
      <template #header>
        <el-text style="font-weight: bold; font-size: 16px">文章分类</el-text>
      </template>
      <div class="category-list">
        <router-link
          v-for="(item, index) in categoryList"
          :key="index"
          :to="{
            name: 'blogListShow',
            params: { categoryId: item.categoryId }
          }"
          class="category-item"
        >
          <div class="category-content">
            <svg-icon icon-class="read" class="category-icon" />
            <el-text class="category-name">
              {{ item.categoryName }}
            </el-text>
          </div>
        </router-link>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ArrowRightBold } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { getCategoryInfo } from '@/api/category';
import { BlogCategoryVO } from '@/api/category/types';

const router = useRouter();
const route = useRoute();
const UserStore = useUserStore();

// 文章分类列表
const categoryList = ref([] as BlogCategoryVO[]);
const getCategoryList = () => {
  getCategoryInfo()
    .then(response => {
      if (response.data) {
        categoryList.value = response.data as [];
      } else {
        console.error('获取分类数据失败', response);
      }
    })
    .catch(error => {
      console.error('API请求失败', error);
    });
};

// 初始化
onMounted(() => {
  getCategoryList();
});
</script>

<style scoped lang="scss">
.category-card-main {
  width: 100%;
  display: flex;
  padding: 0;

  .card-box {
    margin-bottom: 10px;
  }

  // 穿透el-card的内边距
  :deep(.el-card__body) {
    padding: 10px;
  }
}

.category-card-container {
  width: 100%;

  // 穿透el-card header的内边距
  :deep(.el-card__header) {
    padding: 10px;
  }
  :deep(.el-card__body) {
    padding: 0;
  }

  .category-list {
    display: flex;
    flex-direction: column;
    gap: 8px; // 增加分类项之间的间距

    .category-item {
      padding: 12px; // 增加内边距
      display: flex;
      align-items: center;
      width: 100%;
      text-decoration: none;
      border-radius: 8px;
      background: #f9f9f9; // 背景色
      transition:
        background-color 0.3s,
        transform 0.3s,
        box-shadow 0.3s; // 添加过渡效果
      overflow: hidden; // 防止内容溢出

      &:hover {
        background-color: #ecf5ff; // 悬浮效果
        transform: scale(1.02); // 悬浮放大效果
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
      }

      .category-content {
        display: flex;
        align-items: center;
        width: 100%; // 确保内容宽度为100%
      }

      .category-icon {
        margin-right: 8px; // 图标与文本之间的间距
        font-size: 20px; // 图标大小
      }

      .category-name {
        font-size: 14px; // 分类名称字体大小
        color: #333; // 分类名称颜色
        white-space: nowrap; // 防止文本换行
        overflow: hidden; // 隐藏溢出文本
        text-overflow: ellipsis; // 溢出文本显示省略号
      }
    }
  }
}

.router-link {
  text-decoration: none;
  width: 100%; // 确保router-link宽度为100%
}
</style>
